<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>滴滴工程师申请</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="mui/dist/css/mui.min.css">
	<link rel="stylesheet" href="public.css">
	<style>
		label{
			display:block;
		}
	</style>
</head>

<body id="body">
<header>滴滴工程师申请</header>
<div class="body">
	<div id="step1" v-if="step==1">
		<validator name="validation">
		<div class="mui-input-group">
			<div class="mui-input-row">
				<label>姓名</label>
				<input v-model="member.username" v-validate:member.sex="{required: true}" type="text" class="mui-input-clear" placeholder="请输入您的姓名">
			</div>
			<div class="mui-input-row">
				<label>性别</label>
				<select v-model="member.sex" v-validate:member.username="{required: true}">
					<option value="1">男</option>
					<option value="2">女</option>
				</select>
			</div>
			<div class="mui-input-row">
				<label>手机号</label>
				<input v-model="member.phone" v-validate:member.phone="{required: true}" type="number" class="mui-input-clear" placeholder="请输入您的手机号">
			</div>
			<div class="mui-input-row">
				<label>微信号</label>
				<input v-model="member.wx_access" v-validate:member.wx_access="{required: true}" type="text" class="mui-input-clear" placeholder="请输入您的微信号">
			</div>
			<div class="mui-input-row">
				<label>身份证号</label>
				<input v-model="member.idcard" v-validate:member.wx_access="{required: true}" type="text" class="mui-input-clear" placeholder="请输入您的身份证号">
			</div>
		</div>
		
		<div class="mui-input-group">
			<div class="mui-input-row">
				<label>入驻城市</label>
				<select  v-model="province" v-validate:member.province="{required: true}" style="flex:1" v-on:change="loadCity()">
					<option value="">请选择省份</option>
					<option value="" v-for="p in provinces" v-bind:value="p.pid" v-text="p.province"></option>
				</select>
				<select v-model="CITY" v-validate:CITY="{required: true}" style="flex:1">
					<option value="">请选择城市</option>
					<option value="" v-for="c in cities" v-bind:value="c" v-text="c.city"></option>
				</select>
			</div>
		</div>
		
		<div class="mui-input-group">
			<div class="mui-input-row">
				<label>维修工龄</label>
				<input v-model="member.working_age" type="text" class="mui-input-clear" placeholder="请输入您的维修工龄">
			</div>
			<div class="mui-input-row" style="align-items: flex-start">
				<label>个人介绍</label>
				<textarea v-model="member.introduce" v-validate:member.introduce="{required: true}" class="mui-input-clear" rows="3" placeholder="简单介绍下自己"></textarea>
			</div>
		</div>
		</validator>
		<div class="btn"><button class="mui-btn mui-btn-warning" v-on:click="step=2" :disabled="!$validation.valid">下一步</button></div>
	</div>
	
	
	<div id="step2" v-if="step==2">
		<validator name="validation1">
		<div class="mui-input-group">
			<div class="mui-input-row">
				<label style="width:150px;">身份证照片</label>
				<div class="idcard">
					<label>
						<img class="idcard0" src="">
						<div>点击上传身份证正面</div>
						<input v-validate:idcard0="{required: true}" type="file" id="idcard0" accept="image/gif,image/jpeg,image/jpg,image/png" onchange="preview(this);">
					</label>
					<label>
						<img class="idcard1" src="">
						<div>点击上传身份证正面</div>
						<input v-validate:idcard1="{required: true}" type="file" id="idcard1" accept="image/gif,image/jpeg,image/jpg,image/png" onchange="preview(this);">
					</label>
				</div>
			</div>
		</div>
		</validator>
		<div class="btn"><button class="mui-btn mui-btn-warning" v-on:click="saveMember();" :disabled="!idcard0 || !idcard1">下一步</button></div>
	</div>
	<div class="progress" v-show="process">
		<progress id="uploadprogress" min="0" max="100" value="0">0</progress>
	</div>
</div>
<script src="mui/dist/js/mui.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/vue-validator.min.js"></script>
<script src="js/jquery-2.2.1.min.js"></script>
<script src="js/public.js"></script>
<script src="layer_mobile/layer.js"></script>
<script>
var vue = new Vue({
	el:"body",
	data:{
		step:1,
		member:{type:1},
		idcard0:null,
		CITY:'',
		idcard1:null,
		province:"",
		provinces:[],
		cities:[],
		process:false
	},
	methods:{
		saveMember:function(){
			vue.member.idcard_front = vue.idcard0;
			vue.member.idcard_contrary = vue.idcard1;
			vue.member.city_id = vue.CITY.city_id;
			vue.member.city = vue.CITY.city;
			
			var index = layer.open({type: 2,shadeClose:false});
			$.post(apiRecycle+"/index.php/Home/Index/apply_account", vue.member, function(res){
				if(res.code==200){
					mui.toast('申请成功，感谢您的支持',{ duration:'long', type:'div' });
					setTimeout(function(){
						location.href="success.html";
					}, 2000);
				} else {
					mui.toast(res.message,{ duration:'long', type:'div' });
				}
				layer.close(index);
			}, "json");
		},
		
		loadCity:function(){
			var thiz = this;
			/*加载城市*/
			var index = layer.open({type: 2,shadeClose:false});
			$.get(apiRecycle+"index.php/Home/User/get_city", {pid:thiz.province}, function(res){
				thiz.cities = res.data;
				layer.close(index);
			}, "json");
		}
	},
	ready:function(){
		var thiz = this;
		
		/*加载省份*/
		var index = layer.open({type: 2,shadeClose:false});
		$.get(apiRecycle+"index.php/Home/User/get_province", {}, function(res){
			thiz.provinces = res.data;
			layer.close(index);
		}, "json");
	}
});

/**/
function preview(input) {
	var formData  = new FormData();
	formData.append("file", input.files[0]);
	
	var index = layer.open({type: 2,shadeClose:false});
	$.ajax({
		url : "http://image.txiaoyuan.cn/index.php/Home/Image/uploadImage?platform=goji",
		data : formData,
		type : 'POST',
		xhr:function(){
			var xhr=new XMLHttpRequest();
			
			vue.process = true;
			document.getElementById('uploadprogress');
			progress.value = progress.innerHTML = 0;
		
			xhr.upload.onprogress = function (event) {
				if (event.lengthComputable) {
					var complete = (event.loaded / event.total * 100 | 0);
					var progress = document.getElementById('uploadprogress');
					progress.value = progress.innerHTML = complete;
				}
			};
			
			return xhr;
		},
		complete:function(){
			vue.process = false;
			layer.close(index);
		},
		processData: false,
		contentType: false,
		success : function(data){
			data = JSON.parse(data);
			document.querySelector("."+input.id).src = data.data.img_origin;
			vue[input.id] = data.data.img_origin;
			vue.process = false;
		},
		error:function(x){
			vue.process = false;
			alert(JSON.stringify(x))
		}
	});
}
</script>
</body>

</html>